<template>
  <div>
    <ul>
      <li @click="$router.push('/set-new-pass')">
        <span>设置密码</span>
      </li>
      <li>
        <span>注销账号</span>
      </li>
    </ul>
    <div class="wb">
      <div class="btn-exit" @click="exit">
        退出登录
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "options",
  methods:{
    exit(){
      localStorage.clear()
      this.$router.push('/my')
    }
  }
}
</script>

<style scoped lang="scss">
ul {
  padding: 5px 15px;
  width: 100%;
  background-color: #ffffff;

  li {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;

    span {
      display: flex;
      align-items: center;
      height: 100%;
    }

    &:last-child {
      border-bottom: none;
    }

    &:nth-child(3) {
      &::before {
        width: 0;
        height: 0;
      }
    }

    &::before {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      //width: 0.26667rem;
      width: 2.66667vw;
      //height: 0.26667rem;
      height: 2.66667vw;
      transform: translateY(-50%) rotate(45deg);
      border-top: 1px solid #b7b7b7;
      border-right: 1px solid #b7b7b7;
    }

    //&::after{
    //  content: "";
    //  display: block;
    //  position: absolute;
    //  bottom: 0;
    //  left: 50%;
    //  transform: translateX(-50%);
    //  width: 100%;
    //  height: 1px;
    //  background-color: #f5f5f5;
    //}
  }
}

.wb {
  background-color: #fff;
  height: 150px;
  overflow: hidden;
  //text-align: center;
  display: flex;
  justify-content: center;
}

.btn-exit {
  width: 345px;
  height: 44px;
  margin: 65px 15px;
  background-color: #e60012;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  line-height: 44px;
  border-radius: 3px;
}
</style>